<template>
	<!-- 家庭中心 -->
	<view class="paramLayout">
		<!-- DHT -->
		<navigator class="tworowparams" v-if="props.obj.equipmentType=='DHT'"
			:url="'/pages/EQUIPMENTS/sensorHistory/sensorHistory?type='+props.obj.equipmentType+'&mac='+props.obj.mac+'&name='+props.obj.equipmentName"
			:style="{width:340+'rpx'}">
			<view class="name">
				<view class="icon iconfont icon-wenshiduchuanganqi">&nbsp;{{props.obj.equipmentName}}</view>
				<view class="description">{{props.obj.information}}</view>
			</view>
			<view class="params">
				<view class="param">
					<view class="icon iconfont icon-wendu"></view>
					<view class="text">&ensp;{{sensorDHT.temperature}}°C</view>
				</view>
				<view class="param">
					<view class="icon iconfont icon-shidu"></view>
					<view class="text">&ensp;{{sensorDHT.humidity}}%</view>
				</view>
				<view class="param">
					<view class="icon iconfont icon-rentiganyingqi"></view>
					<view class="text">&ensp;{{sensorDHT.heat}}°C</view>
				</view>
				<view class="param">
					<view class="icon iconfont icon-loudianwendu"></view>
					<view class="text">&ensp;{{sensorDHT.dewPoint}}°C</view>
				</view>
			</view>
		</navigator>
		<!-- AEM1000 -->
		<navigator class="tworowparams" v-else-if="props.obj.equipmentType=='AEM1000'"
			:url="'/pages/EQUIPMENTS/sensorHistory/sensorHistory?type='+props.obj.equipmentType+'&mac='+props.obj.mac+'&name='+props.obj.equipmentName"
			:style="{width:340+'rpx'}">
			<view class="name">
				<view class="icon iconfont icon-air-quality">&nbsp;{{props.obj.equipmentName}}</view>
				<view class="description">{{props.obj.information}}</view>
			</view>
			<view class="params">
				<view class="param">
					<view class="icon iconfont icon-wendu"></view>
					<view class="text">&ensp;{{sensorAEM1000.temperature}}°C</view>
				</view>
				<view class="param">
					<view class="icon iconfont icon-shidu"></view>
					<view class="text">&ensp;{{sensorAEM1000.humidity}}%</view>
				</view>
				<view class="param">
					<view class="icon iconfont icon-loudianwendu"></view>
					<view class="text">&ensp;{{sensorAEM1000.dewPoint}}°C</view>
				</view>
				<view class="param">
					<view class="icon iconfont icon-CO"></view>
					<view class="text">&ensp;{{sensorAEM1000.co2}}ppm</view>
				</view>
			</view>
		</navigator>
		<!-- MPPT -->
		<navigator class="threerowparams" v-else-if="props.obj.equipmentType=='MPPT'"
			:url="'/pages/EQUIPMENTS/sensorHistory/sensorHistory?type='+props.obj.equipmentType+'&mac='+props.obj.mac+'&name='+props.obj.equipmentName"
			:style="{width:690+'rpx'}">
			<view class="name">
				<view class="icon iconfont icon-taiyangneng">&nbsp;{{props.obj.equipmentName}}</view>
				<view class="description">{{props.obj.information}}</view>
			</view>
			<view class="params">
				<view class="paramnine">电池电压&ensp;{{deviceMPPT.batteryVoltage}}V</view>
				<view class="paramnine">光伏电压&ensp;{{deviceMPPT.solarVoltage}}V</view>
				<view class="paramnine">充电电流&ensp;{{deviceMPPT.chargeCurrent}}A</view>
				<view class="paramnine">放电电压&ensp;{{deviceMPPT.dischargeVoltage}}V</view>
				<view class="paramnine">放电电流&ensp;{{deviceMPPT.dischargeCurrent}}A</view>
				<view class="paramnine">发电量&ensp;{{deviceMPPT.totalGeneration}}kWh</view>
				<view class="paramnine">用电量&ensp;{{deviceMPPT.totalConsumption}}kWh</view>
				<view class="paramnine">温度&ensp;{{deviceMPPT.temperature}}°C</view>
				<view class="paramnine">故障&ensp;{{deviceMPPT.status}}</view>
			</view>
		</navigator>
		<!-- UPS -->
		<navigator class="threerowparams" v-else-if="props.obj.equipmentType=='UPS'"
			:url="'/pages/EQUIPMENTS/sensorHistory/sensorHistory?type='+props.obj.equipmentType+'&mac='+props.obj.mac+'&name='+props.obj.equipmentName"
			:style="{width:690+'rpx'}">
			<view class="name">
				<view class="icon iconfont icon-UPS">&nbsp;{{props.obj.equipmentName}}</view>
				<view class="description">{{props.obj.information}}</view>
			</view>
			<view class="params">
				<view class="parameight">充电状态&ensp;{{deviceUPS.status}}</view>
				<view class="parameight">充电电压&ensp;{{deviceUPS.vbusVoltage}}mV</view>
				<view class="parameight">充电电流&ensp;{{deviceUPS.vbusCurrent}}mA</view>
				<view class="parameight">充电功率&ensp;{{deviceUPS.vbusPower}}mW</view>
				<view class="parameight">UPS电压&ensp;{{deviceUPS.batteryVoltage}}V</view>
				<view class="parameight">UPS电量&ensp;{{deviceUPS.batteryPercent}}%</view>
				<view class="parameight">剩余使用时间&ensp;{{deviceUPS.toEmpty}}min</view>
				<view class="parameight">剩余充电时间&ensp;{{deviceUPS.toFull}}min</view>
			</view>
		</navigator>
		<!-- EM -->
		<navigator class="tworowparams" v-else-if="props.obj.equipmentType=='EM'"
			:url="'/pages/EQUIPMENTS/EMView/EMView?type='+props.obj.equipmentType+'&mac='+props.obj.mac+'&name='+props.obj.equipmentName"
			:style="{width:340+'rpx'}">
			<view class="name">
				<view class="icon iconfont icon-dianbiao">&nbsp;{{props.obj.equipmentName}}</view>
				<view class="description">{{props.obj.information}}</view>
			</view>
			<view class="params">
				<view class="param">
					<view class="icon iconfont icon-dianya1"></view>
					<view class="text">&ensp;{{deviceEM.voltage}}V</view>
				</view>
				<view class="param">
					<view class="icon iconfont icon-dianya"></view>
					<view class="text">&ensp;{{deviceEM.current}}A</view>
				</view>
				<view class="param">
					<view class="icon iconfont icon-lightning-full"></view>
					<view class="text">&ensp;{{deviceEM.powerFactor}}</view>
				</view>
				<view class="param">
					<view class="icon iconfont icon-yougonggongshuai"></view>
					<view class="text">&ensp;{{deviceEM.activePower}}W</view>
				</view>
			</view>
		</navigator>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { onShow } from '@dcloudio/uni-app'
	import { type DHT, type AEM1000 } from '@/types/sensor'
	import { type MPPT, type UPS, type EM } from '@/types/device'
	import { getLast } from '@/services/sensor'

	/**
	 * 接收父组件传值,传对象
	 * 约束类型,并设定初始值
	 */
	const props = defineProps(["obj"])

	/**
	 * 获取最新一组数据
	 * 每次切换页面刷新数据
	 */
	let sensorDHT = ref<DHT>({})
	let sensorAEM1000 = ref<AEM1000>({})
	let deviceMPPT = ref<MPPT>({})
	let deviceUPS = ref<UPS>({})
	let deviceEM = ref<EM>({})
	async function getLastData() {
		await getLast(props.obj.equipmentType, props.obj.mac).then(res => {
			if (props.obj.equipmentType == 'DHT') {
				sensorDHT.value = res.data
			} else if (props.obj.equipmentType == 'AEM1000') {
				sensorAEM1000.value = res.data
			} else if (props.obj.equipmentType == 'MPPT') {
				deviceMPPT.value = res.data
			} else if (props.obj.equipmentType == 'UPS') {
				deviceUPS.value = res.data
			} else if (props.obj.equipmentType == "EM") {
				deviceEM.value = res.data
			}
		})
	}
	getLastData()

	onShow(() => {
		getLastData()
	})
</script>

<style lang="scss" scoped>
	.paramLayout {
		margin: 10rpx auto; // 两个参数 上下/左右

		.tworowparams {
			// width: 340rpx; // 宽度
			height: 150rpx; //高度
			margin-left: 8rpx; // (1+8+1+340)x2=700
			margin-bottom: 8rpx;
			border: 1px solid#ccc; // 边框线宽及色彩
			border-radius: 15rpx; // 圆弧
			background-color: rgba(255, 255, 255, 0.5); // 透明/透明度

			.name {
				display: flex;
				justify-content: space-between;
				align-items: center; // 纵向居中
				margin: 10rpx 30rpx; // 两个参数 上下/左右
				color: #0047ab; // 文字颜色

				.icon {
					font-size: 26rpx; //字体尺寸
					font-style: oblique; // 文字加倾斜
					font-family: Microsoft YaHei; // 文字字体
				}

				.description {
					font-size: 20rpx;
					color: #666
				}
			}

			.params {
				display: flex; // 弹性布局
				flex-wrap: wrap; //允许换行
				padding: 10rpx; // 内左边距

				.param {
					display: flex; // 弹性布局
					justify-content: baseline; // 左右两端对齐
					width: 160rpx; // 宽度
					height: 45rpx; // 高度
					color: #4242a6; // 文字颜色
					text-align: center; // 文字水平居中
					align-self: center; // 文字上下居中

					.text {
						font-size: 26rpx; // 文字尺寸
						font-family: Microsoft YaHei; // 文字字体
					}
				}
			}
		}

		.threerowparams {
			margin-left: 8rpx; // (1+8+1+340)x2=700
			margin-bottom: 8rpx;
			border: 1px solid#ccc; // 边框线宽及色彩
			border-radius: 15rpx; // 圆弧
			background-color: rgba(255, 255, 255, 0.5); // 透明/透明度

			.name {
				display: flex;
				justify-content: space-between;
				align-items: center; // 纵向居中
				margin: 10rpx 30rpx; // 两个参数 上下/左右
				color: #705020; // 文字颜色

				.icon {
					font-size: 28rpx; //字体尺寸
					font-style: oblique; // 文字加倾斜
					font-family: Microsoft YaHei; // 文字字体
				}

				.description {
					font-size: 20rpx;
				}
			}

			.params {
				display: flex; // 弹性布局
				flex-wrap: wrap; //允许换行

				.paramnine {
					display: flex; // 弹性布局
					justify-content: space-around; // 周围分配相同的空间
					padding: 10rpx 0rpx; // 两个参数 上下/左右
					width: 230rpx; // 宽度
					font-size: 28rpx; // 文字尺寸
					font-family: Microsoft YaHei; // 文字字体
					color: #705020; // 文字颜色
					text-align: center; // 文字水平居中
					align-self: center; // 文字上下居中
				}

				.parameight {
					display: flex; // 弹性布局
					justify-content: space-around; // 左右两端对齐
					padding: 10rpx 0rpx; // 两个参数 上下/左右
					width: 345rpx; // 宽度
					font-size: 28rpx; // 文字尺寸
					font-family: Microsoft YaHei; // 文字字体
					color: #705020; // 文字颜色
					text-align: center; // 文字水平居中
					align-self: center; // 文字上下居中
				}
			}
		}
	}
</style>